<template>
	<view class="">
		<!-- <view class="header">
			<view class="">
				有家记忆·{{name}}
			</view>
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#fff" size="20"></up-icon>
			</view>
		</view> -->
		
		<view class="head_img" :style="{
        backgroundImage: `url('${pic}')`,
        backgroundSize: '100% 100%',
      }">
			<view class="title text-left">
				{{ title }}
			</view>
			<view class="cont width-446 marginTop-20 text-left">
				{{ desc }}
			</view>
		</view>
<view class="color-333 fontSize-32 weight-700 paddingLeft-30">
			{{big_sort}}-{{small_sort}}{{name}}
		</view>
		<view class="flex flex-wrap u-flex-between padding-30">
			<view class="marginBottom-22" v-for="(i, v) in stepDesc" :key="v">
				<view class="img-section">
					<image :src="i.pic_bg" mode="" class="list_img" @click="btn(i)"></image>
					<image :src="finishList[v]" mode="" class="finish-img" v-if="i.status == 1"></image>
				</view>

			</view>
		</view>
		<view class="width-200 height-80" style="margin: 0 auto" @click="toPage">
			<image src="../../static/studyBtn.png" mode="" style="width: 100%; height: 100%"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	const getRemWordDescApi = inject("getRemWordDesc");
	const defaultnameApi = inject("defaultname");
	const stepDesc = ref([]);
	const desc = ref("");
	const title = ref("");
	const pic = ref("");
	const name = ref("");
	const item = ref({});
	const pageentr_num = ref(0);
	const page = ref(1);
	const big_sort = ref(1);
	const region_num = ref(0);
	const small_sort = ref(1);
	const getRemWordListApi = inject('getRemWordList')
	const finishList = ref([
		'../../static/finish1.png',
		'../../static/finish2.png',
		// '../../static/finish3.png',
		'../../static/finish4.png',
		'../../static/finish5.png',
	])
	onLoad((op) => {
		console.log(op, 50)
		region_num.value = op.region_num;
		page.value = op.page;
		big_sort.value = op.big_sort;
		small_sort.value = op.small_sort;
		pageentr_num.value = op.pageentr_num;
		page.value = op.page;
		big_sort.value = op.big_sort;
		small_sort.value = op.small_sort;
	});
	onShow((op) => {
		console.log(op, 50)
		getRemWordDescApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
		}).then((res) => {
			console.log(res, 106);
			desc.value = res.indexDesc.desc;
			pic.value = res.indexDesc.pic;
			title.value = res.indexDesc.title;
			stepDesc.value = res.stepDesc;
			name.value = res.name
			uni.setNavigationBarTitle({
				title:'有家记忆·'+name.value
			})
			// list.value = res.waitWordList
		});
	
		defaultnameApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: 'name'
		}).then(res => {
	
		})
		defaultnameApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: 'plant'
		}).then(res => {
	
		})
		defaultnameApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: 'decorate'
		}).then(res => {
	
		})
	});
	const btn = (i) => {
		console.log(i,130)
		if (pageentr_num.value == 0) {
			uni.navigateTo({
				url: "/pagesA/reciteWords/wordDesc?big_sort=" +
					big_sort.value +
					"&page=" +
					page.value +
					"&small_sort=" +
					small_sort.value +
					"&step=" +
					i.step,
			});
		} else {
			if (i.step == "1") {
				uni.navigateTo({
					url: "/pagesA/reciteWords/oneStage?big_sort=" +
						big_sort.value +
						"&page=" +
						page.value +
						"&small_sort=" +
						small_sort.value +
						"&status=" +
						i.status
				});
			} else if (i.step == "2") {

				getRemWordListApi({
					page: page.value,
					small_sort: small_sort.value,
					big_sort: big_sort.value
				}).then(res => {
					console.log(res, 106)
					if (res.waitWordList.length == 0) {
						if(res.english_story!=''){
							uni.navigateTo({
								url: "/pagesA/reciteWords/addBoss?big_sort=" +
									big_sort.value +
									"&page=" +
									page.value +
									"&small_sort=" +
									small_sort.value +
									"&region_num=" +
									region_num.value +
									"&status=" +
									i.status
							});
						}else if(res.english_story==''){
								if (i.status == '1') {
									uni.navigateTo({
										url: "/pagesA/reciteWords/addBoss?big_sort=" +
											big_sort.value +
											"&page=" +
											page.value +
											"&small_sort=" +
											small_sort.value +
											"&region_num=" +
											region_num.value +
											"&status=" +
											i.status
									});
								} else {
									uni.navigateTo({
										url: "/pagesA/reciteWords/wordArea?big_sort=" +
											big_sort.value +
											"&page=" +
											page.value +
											"&small_sort=" +
											small_sort.value +
											"&region_num=" +
											region_num.value,
									});
								}
						}
					

					} else {

						uni.navigateTo({
							url: "/pagesA/reciteWords/twoStage?big_sort=" +
								big_sort.value +
								"&page=" +
								page.value +
								"&small_sort=" +
								small_sort.value +
								"&region_num=" +
								region_num.value +
								"&status=" +
								i.status
						});

					}
				})

			} else if (i.step == "4") {
				uni.navigateTo({
					url: "/pagesA/reciteWords/fourStage?big_sort=" +
						big_sort.value +
						"&page=" +
						page.value +
						"&small_sort=" +
						small_sort.value +
						"&status=" +
						i.status
				});
			} else if (i.step == "5") {
				uni.navigateTo({
					url: "/pagesA/reciteWords/fiveStage?big_sort=" +
						big_sort.value +
						"&page=" +
						page.value +
						"&small_sort=" +
						small_sort.value +
						"&status=" +
						i.status
				});
			} else if (i.step == "3") {
				uni.navigateTo({
					url: "/pagesA/reciteWords/threeStage?big_sort=" +
						big_sort.value +
						"&page=" +
						page.value +
						"&small_sort=" +
						small_sort.value +
						"&status=" +
						i.status
				});
			}
		}
	};

	const toPage = () => {
		uni.navigateTo({
			url: "/pagesA/reciteWords/myStudyReport?big_sort=" +
				big_sort.value +
				"&page=" +
				page.value +
				"&small_sort=" +
				small_sort.value,
		});
	};
	const back = () => {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.head_img {
		width: 686rpx;
		height: 384rpx;
		margin: 30rpx auto;
		padding-left: 200rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
		padding-right: 40rpx;
	}

	.title {
		height: 60rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		line-height: 60rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.cont {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 39rpx;
		font-style: normal;
		text-transform: none;
		margin: 0 auto;
	}

	.list_img {
		width: 328rpx;
		height: 228rpx;
	}

	.finish-img {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 12rpx;
		top: 12rpx;
	}

	.img-section {
		position: relative;
		width: 328rpx;
		height: 228rpx;
	}

	.header {
		width: 100%;
		height: 170rpx;
		color: #fff;
		line-height: 270rpx;
		background-color: #51D580;
		text-align: center;
		font-size: 24rpx;
		position: relative;

		.arr {
			position: absolute;
			left: 20rpx;
			top: 120rpx;

		}
	}
</style>